<template>
	<p>生命周期 {{ msg }}</p>
</template>

<script>
	import {
		onBeforeMount,
		onMounted,
		onBeforeUpdate,
		onUpdated,
		onBeforeUnmount,
		onUnmounted,
	} from "vue";

	export default {
		name: "LifeCycles",

		props: {
			msg: String,
		},

		// 等于 beforeCreate 和 created
		setup() {
			console.log("setup");

			onBeforeMount(() => {
				console.log("onBeforeMount");
			});
			onMounted(() => {
				console.log("onMounted");
			});

			onBeforeUpdate(() => {
				console.log("onBeforeUpdate");
			});
			onUpdated(() => {
				console.log("onUpdated");
			});

			onBeforeUnmount(() => {
				console.log("onBeforeUnmount");
			});
			onUnmounted(() => {
				console.log("onUnmounted");
			});
		},

		beforeCreate() {
		    console.log('beforeCreate')
		},
		created() {
		    console.log('created')
		},

		beforeMount() {
		    console.log('beforeMount')
		},
		mounted() {
		    console.log('mounted')
		},

		beforeUpdate() {
		    console.log('beforeUpdate')
		},
		updated() {
		    console.log('updated')
		},

		// beforeDestroy 改名
		beforeUnmount() {
		    console.log('beforeUnmount')
		},
		// destroyed 改名
		unmounted() {
		    console.log('unmounted')
		}
	};
</script>